<!-- 房间管理 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <el-form :model="form" :inline="true" label-width="auto">
        <el-form-item label="房间号:">
          <el-input v-model="form.name" clearable placeholder="请输入房间号" style="width: 170px" />
        </el-form-item>
        <el-form-item label="楼栋:">
          <el-cascader v-model="form.buildingId" :options="options" :props="{ label: 'name', value: 'id' }"
            @change="handleChange" style="width: 100%;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <ELTable v-bind="tableConfig" ref="houseTable">
        <template #btns="{ deleteAll }">
          <el-button type="success" @click="add">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            新增房间
          </el-button>
          <el-button type="danger" @click="deleteAll">
            <el-icon class="icon">
              <Delete />
            </el-icon>
            批量删除
          </el-button>
        </template>

        <template #addTime="{ scope }">
          {{ dayjs(scope.row.addTime).format("YYYY-MM-DD HH:mm") }}
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button :icon="Edit" text size="small" class="btn" @click="uploadEdit(scope.row)">
            编辑
          </el-button>
          <el-button :icon="Delete" text size="small" class="btn" @click="deleteHandle(scope.row.id)">
            删除
          </el-button>
        </template>
      </ELTable>

      <!-- 添加 -->
      <houseDialog v-if="dialogVisible" :listParams="listParams" @close="handelClose" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { houseList, houseDel, houseDelAll } from '@/api/config/house/house'
import { listParams, houseListData } from '@/api/config/house/type'
import { Search, Refresh, Edit, Delete } from '@element-plus/icons-vue'
import ELTable, { TableData } from '@/components/ELTable.vue'
import dayjs from 'dayjs'
import houseDialog from '@/components/config/houseAdd.vue'
import { buildingList } from '@/api/config/building/building'
import { buildTree } from '@/utils/treeUtil'
import { buildingListData } from '@/api/config/building/type'

const dialogVisible = ref(false);

const form = reactive<listParams>({
  name: "",
  page: 1,
  pageSize: 10,
  buildingId: 0,
});

let listParams = reactive<houseListData>({
  id: 0,
  buildingId: 0,
  type: 0,
  name: "",
  beds: 0,
  picture: "",
});

// 楼栋列表
const options = ref<buildingListData[]>([])
const getBuildingList = async () => {
  let res = await buildingList();
  options.value = buildTree(res.list);
};
const handleChange = (value: any) => {
  form.buildingId = value[value.length - 1];
};

// 添加
const add = () => {
  dialogVisible.value = true;
  listParams = {
    id: 0,
    buildingId: undefined,
    type: undefined,
    name: "",
    beds: undefined,
    picture: "",
  };
};

// 修改
const uploadEdit = (data: houseListData) => {
  console.log(data);
  listParams = data;
  dialogVisible.value = true;
};

// 搜索
const search = () => {
  houseTable.value.getData(form);
};

// 重置
const reset = () => {
  form.name = "";
  form.buildingId = 0;
  houseTable.value.getData();
};

// 表格
const tableConfig = reactive<TableData>({
  loadData: houseList,
  delete: houseDel,
  deleteAll: houseDelAll,
  columns: [
    {
      prop: "id",
      label: "序号",
      attrs: {
        width: "70px",
      },
    },
    {
      prop: "name",
      label: "房间号",
      attrs: {
        width: "80px",
      },
    },
    {
      prop: "buildingName",
      label: "楼层",
    },
    {
      prop: "beds",
      label: "床位数",
      attrs: {
        width: "80px",
      },
    },
    {
      prop: "",
      label: "入住老人",
    },
    {
      prop: "addTime",
      label: "创建时间",
      slot: true,
    },
    {
      prop: "addAccountName",
      label: "创建人",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
    },
  ],
});

// 关闭弹框
const houseTable = ref();
const handelClose = () => {
  dialogVisible.value = false;
  houseTable.value.getData();
};

onMounted(() => {
  getBuildingList();
});
</script>

<style lang="less" scoped>
.btn {
  width: 40px;
  color: rgb(64, 158, 255);
  border: none;
}

.btn:last-child {
  color: rgb(245, 108, 127);
}
</style>
